/**
 * Created by liguangsong on 16/8/3.
 */
import React from 'react'

var DataLength = React.createClass( {
    render() {
        return (
            <div className="playerOneDataInfo" style={{ top: this.props.top }}>
                <p className="playerOneDataName">{this.props.name}</p>
                <div className="playerDataLength" style={ {width: this.props.length, background: this.props.color} }>
                    <p className="playerDataInfo">{this.props.info}</p>
                </div>
            </div>
        )
    }
});


var OneGameData = React.createClass({
    filterLength(length) {
        if (length > 850) {
            length = 850;
        }

        return length;
    },

    getAllInfoLength() {
        var pointLength = this.filterLength(this.props.point * 16) + 'px';
        var assistLength = this.filterLength(this.props.assist * 46) + 'px';
        var reboundLength = this.filterLength(this.props.rebound * 36) + 'px';
        var stealLength = this.filterLength(this.props.steal * 92) + 'px';
        var blockLength = this.filterLength(this.props.block * 92) + 'px';
        var turnoverLength = this.filterLength(this.props.turnover * 92) + 'px';
        var minuteLength = this.filterLength(this.props.minute * 10) + 'px';

        return {
            pointLength: pointLength,
            assistLength: assistLength,
            reboundLength: reboundLength,
            stealLength: stealLength,
            blockLength: blockLength,
            turnoverLength: turnoverLength,
            minuteLength: minuteLength
        }
    },

    render() {
        var allInfoLength = this.getAllInfoLength();
        return (
            <div className="playerOneGameData">
                <DataLength name="Points" length={allInfoLength.pointLength} color="rgb(230, 58, 51)" info={this.props.point}/>
                <DataLength  name="Assists" length={allInfoLength.assistLength} color="rgb(245, 176, 39)" top="-19px" info={this.props.assist} />
                <DataLength  name="Rebounds" length={allInfoLength.reboundLength} color="rgb(72, 112, 120)" top="-38px" info={this.props.rebound}/>
                <DataLength  name="Steals" length={allInfoLength.stealLength} color="rgb(62, 131, 221)" top="-57px" info={this.props.steal}/>
                <DataLength  name="Blocks" length={allInfoLength.blockLength} color="rgb(53, 126, 63)" top="-76px" info={this.props.block}/>
                <DataLength  name="Turnovers" length={allInfoLength.turnoverLength} color="rgb(102, 100, 228)" top="-95px" info={this.props.turnover}/>
                <DataLength  name="Minutes" length={allInfoLength.minuteLength} color="rgb(67, 170, 142)" top="-114px" info={this.props.minute}/>
            </div>
        )
    }
});

export default OneGameData;